@import "src/@notadd/scss/notadd";

.notadd-upload {

    &-container {
        display: flex;
        margin: 0 -10px;
    }

    &-select {
        position: relative;
        border: 2px dashed #d9d9d9;
        border-radius: 5px;
        width: 128px;
        height: 128px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10px;

        &.dragarea {
            background-color: #fff;
        }

        &.droparea {
            cursor: copy;
            box-sizing: border-box;
            box-shadow: 0 0 15px #333;
            position: relative;
        }
    }

    &-icon {
        @include mat-icon-size(32px);
        color: #999;
    }

    &-text {
        margin-top: 8px;
        font-size: 12px;
        text-align: center;
        display: inline-block;
        color: #808080;
    }

    &-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &-input {
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
    }

    &-preview {
        width: 128px;
        height: 128px;
        position: relative;
        margin: 10px;

        img {
            width: 100%;
            height: 100%;
            border: 2px dashed #d9d9d9;
        }

        .icon {
            width: 100%;
            height: 100%;
            position: relative;

            &::before {
                content: attr(content);
                display: inline-block;
                position: absolute;
                bottom: 0;
                left: -20px;
                top: 34px;
                right: 0;
                font-size: 34px;
                text-transform: uppercase;
                text-anchor: middle;
                color: #FFF;
                margin: auto;
                text-align: center;
                height: 38%;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .mat-icon-button {
            display: none;
            position: absolute;
            right: 5px;
            bottom: 5px;
            cursor: pointer;
        }

        &::before {
            content: '';
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            z-index: 1;
        }

        &:hover {
            .mat-icon-button {
                display: inline;
                z-index: 3;
            }

            &::before {
                display: block;
            }
        }
    }

    &-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    &-errors {
        color: #FF1744;
        padding: 0;
        list-style: none;
        font-size: 12px;
        margin: 0 10px;

        li {
            margin: 5px 0;
        }
    }
}
